<style scoped>
    .page-act20170214 {
        font-family: 'Microsoft JhengHei Light', 'Microsoft JhengHei', 'Microsoft YaHei Light', 'Microsoft YaHei', sans-serif;
        font-size: 0.12rem;
        width: 100%;
        background: #362c51;
        color: #fff;
        min-height: 100vh;
    }
    .act_20170214 .count_warp {
        height: 0.335rem;
        line-height: 0.335rem;
        text-align: center;
        width: 100%;
        background: #ffb02d;
        position: fixed;
        top: 0;
        z-index: 999;
    }




    .act_20170214 .countdown {
        height: 100%;
        background: #302a2b;
        margin: 0 auto;
        transform: translateY(0);
        -webkit-transform: translateY(0);
    }
    .act_20170214 .countdown.in {

    }







    .act_20170214 .countdown i {
        color: #000000;
        width: 0.45rem;
        letter-spacing: 0.14rem;
        text-indent: 0.08rem;
        text-align: left;
        display: inline-block;
        background: url('') center center / cover;
    }




    .act_20170214 .banner {
        display: block;
        width: 100%;
        /*height: 7.10rem;*/
        height: 5.06rem;
        background: url("https://img.alicdn.com/imgextra/i4/1876943437/TB27VK9eR0kpuFjy1zdXXXuUVXa_!!1876943437.jpg") center center / cover;
        position: relative;
        text-align: center;
        margin-top: -0.34rem;
    }
    .act_20170214 .banner p {
        display: block;
        font-size: 0.14rem;
        color: #962725;
        height: 0.4rem;
        line-height: 0.2rem;
        position: absolute;
        bottom: .5rem;
        left: 0;
        right: 0;
        margin: auto;
    }
    .act_20170214 .act {
        margin: 0 auto;
    }

    .act_20170214 .act_1 {
        height: 10.945rem;
        width: 3.12rem;
        margin-top: -0.125rem;
    }
    .act_20170214 .act_1 > .act_1_warp {
        height: 100%;
        width: 100%;
        position: relative;
        /*background: url("https://img.alicdn.com/imgextra/i3/1876943437/TB21iYHdMJkpuFjSszcXXXfsFXa_!!1876943437.jpg") repeat-y;*/
        /*background-size: 6.24rem 0.04rem;*/
        background: #2d2346;
        box-shadow: -0.01rem -0.01rem #2a1d17;
        border-radius: 0.05rem;
    }
    /*.act_1 > .act_1_warp::before,.act_1 > .act_1_warp::after {*/
    /*display: block;*/
    /*content: '';*/
    /*left: 0;*/
    /*position: absolute;*/
    /*height: 0.8rem;*/
    /*width: 100%;*/
    /*background: url("https://img.alicdn.com/imgextra/i2/1876943437/TB2j2LRdR0kpuFjSsziXXa.oVXa_!!1876943437.jpg");*/
    /*background-size: cover;*/
    /*}*/
    /*.act_1 > .act_1_warp::before {*/
    /*top: 0;*/
    /*background-position: top center;*/
    /*}*/
    /*.act_1 > .act_1_warp::after {*/
    /*bottom: 0;*/
    /*background-position: bottom center;*/
    /*}*/

    .act_20170214 .act_1 .good_warp {
        height: 100%;
        width: 100%;
        padding: 0.34rem 0.1rem 0 0.1rem;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    .act_20170214 .act_1 .good_item {
        height: 1.964rem;
        width: 50%;
        /*flex-flow: row wrap;*/
        position: relative;
        text-align: center;
        margin: 0 0 0.11rem 0;
        float: left;
        z-index: 9;
    }
    .act_20170214 .act_1 .good_item img {
        width: 1rem;
        height: 1.08rem;
        /*width: 2.35rem;*/
        /*height: 2.538rem;*/
        position: absolute;
        top: 0.11rem;
        left: 0;
        right: 0;
        margin: auto;
        object-fit: contain;
    }
    .act_20170214 .act_1 .good_item p {
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        /*top: 2.938rem; !* 0.18 + 2.38*!*/
        top: 1.28rem; /* 0.18 + 2.38*/
        font-size: 0.14rem;
        /*color: #962725;*/
        color: #fff;
        font-weight: bold;
        line-height: 1;
    }
    .act_20170214 .act_1 .good_item a {
        position: absolute;
        display: block;
        height: 0.253rem;
        line-height: 0.253rem;
        width: 0.83rem;
        border-radius: 0.07rem;
        left: 0;
        right: 0;
        /*top: 3.378rem;*/
        top: 1.55rem;
        margin: auto;
        background: #ef3737;
        font-size: 0.15rem;
        color: #fff;
        text-align: center;
    }
    .act_20170214 .center_line {
        margin: 0 auto;
        width: 3.12rem;
        height: 0.253rem;
        /*background:url('https://img.alicdn.com/imgextra/i2/1876943437/TB2ta1fdYtlpuFjSspoXXbcDpXa_!!1876943437.jpg') center center / cover;*/
    }
    .act_20170214 .act_2 {
        height: 2.85rem;
        width: 3.12rem;
        padding-bottom: 0.2rem;
        margin-top: -2px;
    }
    .act_20170214 .act_2 > .act_2_warp {
        height: 100%;
        width: 100%;
        position: relative;
        /*background: url("https://img.alicdn.com/imgextra/i3/1876943437/TB21iYHdMJkpuFjSszcXXXfsFXa_!!1876943437.jpg") repeat-y;*/
        /*background-size: 6.24rem 0.04rem;*/
    }
    /*.act_2 > .act_2_warp::before,.act_2 > .act_2_warp::after {*/
    /*display: block;*/
    /*content: '';*/
    /*left: 0;*/
    /*position: absolute;*/
    /*height: 0.8rem;*/
    /*width: 100%;*/
    /*background-size: cover;*/
    /*}*/
    /*.act_2 > .act_2_warp::before {*/
    /*top: 0;*/
    /*background: url("https://img.alicdn.com/imgextra/i2/1876943437/TB2j2LRdR0kpuFjSsziXXa.oVXa_!!1876943437.jpg") top center / cover;*/
    /*}*/
    /*.act_2 > .act_2_warp::after {*/
    /*background: url("https://img.alicdn.com/imgextra/i4/1876943437/TB2nYxEeYBmpuFjSZFAXXaQ0pXa_!!1876943437.jpg") center center / cover;*/
    /*bottom: 0;*/
    /*}*/
    .act_20170214 .act_2 h2 {
        font-size: 0.15rem;
        color: #1b2628;
        font-weight: bold;
        text-align: center;
        line-height: 1;
        padding: 0.325rem 0 0.14rem 0;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
        z-index: 9;
    }
    .act_20170214 .act_2 .rule {
        position: absolute;
        top: .65rem;
        left: 0.05rem;
        right: 0;
        margin: auto;
        width: 2.78rem;
        font-size: 0.13rem;
        color: #962725;
        text-align: justify;
        z-index: 9;
    }
    .act_20170214 .act_2 .rule p {
        padding-top: 0.04rem;
        color: #334245;
    }



    .act_20170214 #act-c1.swiper-container {
        width: 100%;
        margin-top: 0.34rem;
        height: calc(100vh - .835rem);
        height: -webkit-calc(100vh - .835rem);
    }

    .act_20170214 #act-c1 .swiper-slide{
        height:auto;
    }

    .act_20170214 footer {
        position: fixed;
        bottom: 0;
        height: .5rem;
        z-index: 999;
    }
    .act_20170214 footer .btn {
        position: fixed;
        bottom: 0;
        height: .5rem;
        font-size: 0.15rem;
        line-height: .5rem;
        display: block;
        text-align: center;
        z-index: 999;
    }
    .act_20170214 footer .btn_1 {
        background: #ef5657;
        color: #fff;
        width: 100%;
    }
    .act_20170214 footer .btn_2 {
        background: #302a2b;
        color: #fff;
        width: 60%;
        left: 0;
    }
    .act_20170214 footer .btn_3 {
        background: #ef3737;
        color: #fff;
        width: 40%;
        right: 0;
    }





    .downEnter,.downLeave{
        transform: translateY(-100%);
        -webkit-transform: translateY(-100%);
    }


    .act_20170214 .act_2 {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%,-50%,0);
        -webkit-transform: translate3d(-50%,-50%,0);
        z-index: 9999;
        font-size: 0.13rem;
        color: #1b2429;
        background: #ffea97;
        border-radius: 0.05rem;
    }
    .act_20170214 .act_2 i {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        height: 0.4rem;
        width: 0.4rem;
        background: url("https://img.alicdn.com/imgextra/i1/1876943437/TB2JinaeHJkpuFjy1zcXXa5FFXa_!!1876943437.jpg") no-repeat center center / cover #ffea97;
        background-size: 0.14rem 0.14rem;
        transform: translate3d(42%,-42%,0);
        -webkit-transform: translate3d(42%,-42%,0);
        border-radius: 0.2rem;
        z-index: 9999;
    }

    .act_20170214 .mask_but {
        width: 2rem;
        height: .75rem;
        position: absolute;
        top: 2.5rem;
        left: 0;
        right: 0;
        margin: auto;
    }



    .act_20170214 .broadcast {
        line-height: 0.2rem;
        height: auto;
        width: auto;
        max-width: calc(100% - 0.4rem);
        max-width: -webkit-calc(100% - 0.4rem);
        background: rgba(0,0,0,0.6);
        position: fixed;
        z-index: 999;
        top: 1rem;
        left: 0.2rem;
        border-radius: 0.1rem;
        padding: 0.05rem 0.1rem;
        color: #fff;
        transition: .8s all cubic-bezier(0.68,-0.55,0.27,1.55);
        -webkit-transition: .8s all cubic-bezier(0.68,-0.55,0.27,1.55);
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    .act_20170214 .ani-up-show {
        opacity: 1;
        transform: translateY(-0.8rem);
    }
    .act_20170214 .ani-up-hide {
        opacity: 0;
        transform: translateY(-1.6rem);
    }
</style>
<template>
    <div class="page-act20170214" id="page-act">
        <div class="act_20170214" >
            <section class="count_warp">

                <div class="countdown in animated" transition="down"  v-if="data.isStart == 1">
                    <span class="bold">距离活动结束还有</span>
                    <span><i class="t-h" v-html="h"></i></span>:<span><i class="t-m" v-html="m"></i></span>:<span><i class="t-s" v-html="s"></i></span>
                </div>


                <div class="countdown in animated" transition="down" v-if="data.isStart == 2">

                    <span class="bold">距离活动开始还有</span>

                    <span><i class="t-h" v-html="h"></i></span>:<span><i class="t-m" v-html="m"></i></span>:<span><i class="t-s" v-html="s"></i></span>

                </div>
                <div class="countdown in animated" transition="down" v-if="data.isStart == 3">

                    <span class="bold">活动已结束</span>

                </div>

            </section>

            <div class="broadcast" v-if="loop">

                恭喜<span class="name" style="color: #ffb130">{{username}}</span>获得<span class="good">{{title}} </span>，并额外获得<span class="number">{{winMoney}} </span>元微信红包

            </div>

            <div class="swiper-container" id="act-c1">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="banner">
                            <div class="mask_but" @click="isRule = true"></div>
                            <p style="visibility: hidden">
                                活动当期幸运号码<b>逢6</b>，中奖用户将额外
                                <br>
                                获得红包一份，<b>单笔最大100元</b>！
                            </p>
                        </div>
                        <section class="act act_1">
                            <div class="act_1_warp">
                                <div class="good_warp">

                                    <!--  红包  -->
                                    <div class="good_item">
                                        <img src="https://img.alicdn.com/imgextra/i4/1876943437/TB2RXP2fUhnpuFjSZFpXXcpuXXa_!!1876943437.png">
                                        <p>50元微信红包</p>
                                        <a :href="apiDomain+'/index/getCurrent?id=38560'" @click="cnzz('情人节|50元微信红包')">立即抢购</a>
                                    </div>
                                    <div class="good_item">
                                        <img src="https://img.alicdn.com/imgextra/i2/1876943437/TB2.bUcfSFmpuFjSZFrXXayOXXa_!!1876943437.png">
                                        <p>88元微信红包</p>
                                        <a :href="apiDomain+'/index/getCurrent?id=69915'" @click="cnzz('情人节|88元微信红包')">立即抢购</a>
                                    </div>
                                    <div class="good_item">
                                        <img src="https://img.alicdn.com/imgextra/i4/1876943437/TB2oLP7fORnpuFjSZFCXXX2DXXa_!!1876943437.png">
                                        <p>100元微信红包</p>
                                        <a :href="apiDomain+'/index/getCurrent?id=204'" @click="cnzz('情人节|100元微信红包')">立即抢购</a>
                                    </div>
                                    <div class="good_item">
                                        <img src="https://img.alicdn.com/imgextra/i1/1876943437/TB2Ecr_fNhmpuFjSZFyXXcLdFXa_!!1876943437.png">
                                        <p>200元微信红包</p>
                                        <a :href="apiDomain+'/index/getCurrent?id=199'" @click="cnzz('情人节|200元微信红包')">立即抢购</a>
                                    </div>

                                    <!--  话费  -->
                                    <div class="good_item">
                                        <img src="https://img.alicdn.com/imgextra/i1/1876943437/TB2.o3gfJ4opuFjSZFLXXX8mXXa_!!1876943437.png">
                                        <p>全网通100话费</p>
                                        <a :href="apiDomain+'/index/getCurrent?id=63020'" @click="cnzz('情人节|全网通100话费')">立即抢购</a>
                                    </div>
                                    <div class="good_item">
                                        <img src="https://img.alicdn.com/imgextra/i3/1876943437/TB2gzbqeMNlpuFjy0FfXXX3CpXa_!!1876943437.png">
                                        <p>全网通200话费</p>
                                        <a :href="apiDomain+'/index/getCurrent?id=71288'" @click="cnzz('情人节|全网通200话费')">立即抢购</a>
                                    </div>
                                    <div class="good_item">
                                        <img src="https://img.alicdn.com/imgextra/i2/1876943437/TB27RrOfHBnpuFjSZFGXXX51pXa_!!1876943437.png">
                                        <p>全网通500话费</p>
                                        <a :href="apiDomain+'/index/getCurrent?id=63022'" @click="cnzz('情人节|全网通500话费')">立即抢购</a>
                                    </div>

                                    <!--  京东卡  -->
                                    <div class="good_item">
                                        <img src="https://img.alicdn.com/imgextra/i4/1876943437/TB2umqvXNRDOuFjSZFzXXcIipXa_!!1876943437.png">
                                        <p>京东E卡100元</p>
                                        <a :href="apiDomain+'/index/getCurrent?id=69742'" @click="cnzz('情人节|京东E卡100元')">立即抢购</a>
                                    </div>
                                    <div class="good_item">
                                        <img src="https://img.alicdn.com/imgextra/i4/1876943437/TB2QaMbfS0mpuFjSZPiXXbssVXa_!!1876943437.png">
                                        <p>京东E卡200元</p>
                                        <a :href="apiDomain+'/index/getCurrent?id=69747'" @click="cnzz('情人节|京东E卡200元')">立即抢购</a>
                                    </div>
                                    <div class="good_item">
                                        <img src="https://img.alicdn.com/imgextra/i1/1876943437/TB2FSUdfHBmpuFjSZFuXXaG_XXa_!!1876943437.png">
                                        <p>京东E卡500元</p>
                                        <a :href="apiDomain+'/index/getCurrent?id=48321'" @click="cnzz('情人节|京东E卡500元')">立即抢购</a>
                                    </div>
                                </div>
                            </div>
                        </section>
                        <div class="center_line"></div>
                    </div>
                </div>
            </div>

            <div class="mask" v-show="isRule"></div>
            <section class="act act_2" v-show="isRule">
                <div class="act_2_warp">
                    <i @click="isRule = false"></i>
                    <h2>活动规则</h2>
                    <div class="rule">
                        <p>
                            1.  必须在本页面领取活动资格，才能参与活动，单个用户单日最多可获得<b>2000元微信红包</b>。
                        </p>
                        <!--<p>-->
                        <!--2.	活动当期单笔消费满足一定金额，才能获得微信红包奖励，消费金额以本页页面为准-->
                        <!--</p>-->
                        <p>
                            2.	中奖所获红包金额为中奖商品面额的20%，<b>最高100元</b>
                        </p>
                        <p>
                            3.	微信红包需在活动当天领取，超过24：00未领取的红包将失效，请各位中奖用户及时领取
                        </p>
                        <p>
                            4.	本活动的最终解释权归众联拼宝团队所有
                        </p>
                    </div>
                </div>

            </section>

            <footer>

                <div id="btn-next" v-if="data.isStart == 3">
                    <a href="javascript:void(0)" class="btn btn_2">活动已结束</a>
                    <a href="javascript:void(0)" data-href="./" v-link="{path:'/home'}" class="btn btn_3">到处逛逛</a>
                </div>

                <template v-else>

                    <a v-if="!data.isJoin&&!changeStatus" class="btn btn_1" id="btn-1" @click="getGift"  data-cnzz="情人节|领取资格">领取资格</a>

                    <div id="btn-next" v-if="data.isJoin&&changeStatus" >
                        <a href="javascript:void(0)" class="btn btn_2">资格已领取 <span v-if="!!joinTime">{{joinTime}}</span></a>
                        <a href="javascript:void(0)" data-href="./" v-link="{path:'/home'}" class="btn btn_3">到处逛逛</a>
                    </div>

                </template>

            </footer>
        </div>
    </div>
    <pop :status-pop="statusPop" :status-toast="statusToast" :msg="msg">
        <a href="javascript:;" @click="statusPop=false">确定</a>
    </pop>
</template>
<script>
    import User from '../module/user'
    import Request from '../config/request'
//    import Config from '../config/config'
    import Swiper from '../libs/swiper.min'
    import pop from '../components/pop'
    module.exports = {
        data() {
            return {
                data:{},
                joinTime:'',
                apiDomain:'',
                sp:null,
                isRule:false,
                isDown:false,
                h:'&ndash;&ndash;',
                m:'&ndash;&ndash;',
                s:'&ndash;&ndash;',
                timer:0,
                broadcast:[],
                title:'',
                username:'',
                winMoney:'',
                isBroadcast:false,
                statusPop:false,
                statusToast:false,
                msg:'',
                changeStatus:false,
                loop:false
            }
        },
        components: {

            pop

        },
        created(){

            this.$dispatch('isLoading', true);

        },
        async ready() {

            let res = await this.getCashGiftActInfo();

            console.log(res)
            if (res.status == 200) {

                let t = 0;

                if (res.data.isStart == 2 || res.data.isStart == 1) {

                    t = res.data.timeLeft;

                } else {

                    t = -100;

                }

                if (!!res.data.isJoin) {

                    this.changeStatus = true;

                }

                if (!!res.data.joinTime) {

                    let timeStr = res.data.joinTime,
                        timeStr1 = timeStr.substring(5,10),
                        timeStr2 = timeStr.substring(11,16)

                    this.joinTime = timeStr1 + ' ' + timeStr2;

                }

                this.data = Object.assign({},this.data,res.data);

                this.apiDomain = Config.apiDomain;

                this.isDown = true;

                this.sp = new Swiper('#act-c1', {

                    direction: 'vertical',
                    slidesPerView: 'auto',
                    freeMode: true,
                    freeModeMomentum : true,
                    mousewheelControl: true,
                    grabCursor: true,
                    resistanceRatio : 0

                });



                function doubleNum(e) {

                    if(e<10) return ('0'+e);
                    else return e;

                }



                this.timer = setInterval(()=>{

                    if (t >= 0) {


                        let h=Math.floor(t/60/60);
                        let m=Math.floor(t/60%60);
                        let s=Math.floor(t%60);

                        this.h = doubleNum(h);
                        this.m = doubleNum(m);
                        this.s = doubleNum(s);


                    } else if(t == -1){

                        location.reload()

                    }


                    t--;


                },1000)

                if(res.data.isStart == 3 || t == 0){

                    clearInterval(this.timer);

                }

                let broadcast = await this.getBroadcast();

                let data = Object.keys(broadcast.data);

                let len = data.length;

                console.log(data[0])


                let self = this;

                if(data.length>0){

                    this.loop =true

                    loop(len);

                } else {

                    this.loop = false
                }



                function loop(length){

                    self.title = broadcast.data[data[length-1]].title;

                    self.username = broadcast.data[data[length-1]].username;

                    self.winMoney = broadcast.data[data[length-1]].winMoney;

                    setTimeout(function () {

                        self.$nextTick(function(){

                            length--;

                            if(length<0){
                                return ;
                            }


                            loop(length);

                        })

                    },3000)

                }

            }

            this.$dispatch('isLoading', false);

        },
        beforeDestroy() {

            clearInterval(this.timer);

            this.sp.destroy(true,true)

        },
        methods: {

             getCashGiftActInfo(){

                let res =  Request.post(Config.apiDomain + '/index/getCashGiftActInfo',{data:{token:User.token}});

                return res;

            },

             getBroadcast(){

                let res =  Request.post(Config.apiDomain + '/index/getBroadcast');

                return res;
            },

            async getGift(){

                let res = await Request.post(Config.apiDomain + '/index/addAct',{data:{token:User.token,act:'cashGift'}});

                if (res.status == 200) {

                    this.statusToast = true;

                    this.msg = '已领取活动资格';

                    this.changeStatus = true;
                    this.data = Object.assign({},this.data,{isJoin:1})

                } else {

                    this.statusPop = true;

                    this.msg = res.msg;

                }

            }
        },
        transitions:{
            'down':{
                enterClass:'fadeInDown',
                leaveClass:'fadeOutUp'
            },
            'fade':{

                enterClass:'fadeIn',
                leaveClass:'fadeOut'
            }
        }
    }
</script>
